<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雷达扫描</title>
    <link href="script/bootstrap.min.css" rel="stylesheet" />
    <script src="script/bootstrap.min.js"></script>
    <script src="script/jquery-1.10.2.js"></script>
    <script src="script/jquery.rotate.min.js"></script>
    <style type="text/css">
        body {
            background: #000;
        }

        .main {
            padding: 2px;
        }

        .leftright {
            border: 2px solid #00ff90;
            border-radius: 50%;
        }

        .star {
            color: white;
            position: absolute;
            cursor: pointer;
        }

        .showstar {
            color: red;
            position: absolute;
            cursor: pointer;
            display: normal;
        }

        .hidestar {
            position: absolute;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>

    <div id="homePage" class="container">
        <div class="row" style="margin-top: 30px;">
            <div class="col-lg-6 col-md-6 col-xs-6 main">
                <div id="left" class="leftright" style="height: 577px;">
                    <canvas class="rotate " id="hideLeft" style="z-index: 999; position: absolute; transform: rotate(156deg); transform-origin: 50% 50% 0px;" width="577" height="577"></canvas>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-xs-6 main">
                <div id="right" class="leftright" style="height: 577px;">
                    <canvas class="rotate " id="hideRight" style="z-index: 999; position: absolute; transform: rotate(156deg); transform-origin: 50% 50% 0px;" width="577" height="577"></canvas>

                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 100px;">
            <ul>
                <li>
                    <select id="level">
                        <option value="easy">简单</option>
                        <option value="hard">困难</option>
                    </select>
                    <select id="starCount">
                        <option value="10">10个</option>
                        <option value="50">50个</option>
                        <option value="100">100个</option>
                        <option value="500">500个</option>
                    </select>
                </li>
                <li><span id="useTimeLabel" style="color: white; font-size: 30px;">用时：-</span></li>
                <li id="btn-start">
                    <button class="btn btn-success">开始</button></li>
                <li><span id="resualtLabel" style="color: #00ff90; font-size: 30px;"></span></li>
            </ul>
        </div>
    </div>
    <script>
        var useTime = 0.0;
        var hidePositionX, hidePositionY, angle = 0;

        var timeCountStart = false, gameStart = false;
        $(document).ready(function () {
            TimeCount();
            setInterval(function () {
                angle += 3;
                $(".rotate").rotate(angle);
            }, 30)
        })

        $(window).resize(function () {
            $('#btn-start').click();
        })

        $('#btn-start').click(function () {
            $('.star').remove();
            useTime = 0.0;
            RandomGeneration(Number($('#starCount').val()));
            PicSet();
            HideOneStar();
            $('#resualtLabel').html("");
            timeCountStart = true;
            gameStart = true;

        })

        $(".leftright").click(function (e) {
            var span = $('#right').offset().left - $('#left').offset().left;
            if (gameStart) {
                gameStart = false;
                timeCountStart = false;
                var positionX = e.pageX;
                var positionY = e.pageY;
                if (((Math.abs(positionX - hidePositionX) < 20) || (Math.abs(hidePositionX - positionX + span) < 20)) && (Math.abs(positionY - hidePositionY) < 20)) {
                    $('#resualtLabel').html("成功");
                } else {
                    $('#resualtLabel').html("失败");
                }
                $('.hidestar').removeClass('hidestar').addClass('showstar');
            }
            else {

            }
        })

        ///生成点
        function RandomGeneration(starCount) {
            var divObject = $('#left');
            var divObjectElse = $('#right');
            var circleCentreX = divObject.width() / 2;
            var circleCentreY = divObject.height() / 2 - 3;
            var circleR = divObject.width() / 2 - 25;
            for (var iTemp = 0; iTemp < starCount ; iTemp++) {
                var horizontalRandom = Math.random();
                var verticalRandom = Math.random();
                var circleRandom = Math.random();
                divObject.append('<div class="star" style="left:' + (circleCentreX + Math.sin(2 * Math.PI * circleRandom) * (circleR * horizontalRandom))
                    + 'px;top:' + (circleCentreY + Math.cos(2 * Math.PI * circleRandom) * (circleCentreY * verticalRandom)) + 'px">*</div>')
                divObjectElse.append('<div class="star" style="left:' + (circleCentreY + Math.sin(2 * Math.PI * circleRandom) * (circleR * horizontalRandom))
                    + 'px;top:' + (circleCentreY + Math.cos(2 * Math.PI * circleRandom) * (circleCentreY * verticalRandom)) + 'px">*</div>')
            }
        }

        ///隐藏点
        function HideOneStar() {
            $(".star").each(function () {
                hidePositionX = $(this).offset().left + 5;
                hidePositionY = $(this).offset().top + 10;
                $(this).addClass('hidestar');
                return false;
            });
        }

        function TimeCount() {
            if (timeCountStart) {
                useTime += 0.1;
                $('#useTimeLabel').html('用时：' + useTime.toFixed(1));
            }
            setTimeout("TimeCount()", 100)
        }

        ///图片设置
        function PicSet() {
            if ($('#level').val() == 'easy') {
                $('#hideLeft').hide();
                $('#hideRight').hide();
            } else {
                $('#hideLeft').show();
                $('#hideRight').show();
            }
            $('.leftright').css("height", $('.leftright').width());
            var c = document.getElementById("hideLeft");
            c.width = $('.leftright').width();
            c.height = $('.leftright').width();
            var ctx = c.getContext("2d");
            ctx.fillStyle = 'black';
            ctx.sector($('.leftright').width() / 2, $('.leftright').width() / 2, $('.leftright').width() / 2 - 3, 30, 360).fill();
            var c = document.getElementById("hideRight");
            c.width = $('.leftright').width();
            c.height = $('.leftright').width();
            var ctx = c.getContext("2d");
            ctx.fillStyle = 'black';
            ctx.sector($('.leftright').width() / 2, $('.leftright').width() / 2, $('.leftright').width() / 2 - 3, 30, 360).fill();
        }

        CanvasRenderingContext2D.prototype.sector = function (x, y, r, angle1, angle2) {
            this.save();
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false);
            this.closePath();
            this.restore();
            return this;
        }


    </script>


</body>
</html>